import React, { Component } from 'react'
import ReactDOM from 'react-dom';
import { Modal, Form } from 'antd';
import { ModalForm } from '../../../components'
import { fetchData } from '../../../components/AjaxConsumer'
import store from '../../../stores'

const confirm = Modal.confirm;

const WrappedAdvancedSearchForm = Form.create()(ModalForm);
// 1 仓库编码：下拉框，显示当前工厂下面的仓库。
// 1 区域编码：下拉框，显示所选仓库下面的区域。

// 入库过渡库位：弹出库位查询界面，查询当前仓库下面库位使用属性是“入库过渡库位”的库位信息。选择库位点击【确定】。
// 出库过渡库位：弹出库位查询界面，查询当前仓库下面库位使用属性是“出库过渡库位”的库位信息。选择库位点击【确定】。
// 默认分配规则：弹分配规则查询界面，查询当前区域配置的分配规则。选择规则点击【确定】。

// 拣货排序方式：暂不使用。
// 1 库区基点：暂不使用。
// 1 默认集货位推荐类型：暂不使用。
// 1 是否强制出库：暂不使用。
export default class UpdateAreaPage extends Component {
    constructor(props) {
        super(props);

        this.state = {
            loading: false,
            visible: false,
            resData: null,
            submitUrl:'/base/data/area/c',
            formData:[
            {
                type : 'hiddenInput',
                showName : 'id',
                name : 'areaId',
                initialValue : ''
            },{
                type : 'input',
                showName: '库区编码',
                name: 'areaCode',
                pattern: /^[a-zA-Z0-9]*$/,
                errorMessage: '输入内容不合法',
                required:true
            },{
                type : 'input',
                showName: '库区描述',
                name: 'areaDesc',
                required:true
            },{
                type : 'select',
                showName: '仓库编码',
                name: 'whCode',
                pattern: /^[a-zA-Z0-9]*$/,
                errorMessage: '输入内容不合法',
                initialValue : '',
                required:true
            },{
                type : 'select',
                showName: '区域编码',
                name: 'regionCode',
                initialValue : '',
                optionList:[
                    {
                        optionKey:'',
                        optionShow:''
                    }
                ],
                required:true
            },{
                type : 'selectAutoComplete',
                showName: '入库过渡库位',
                name: 'instockTranLoc',
                childrenList:[]
            },{
                type : 'input',
                showName: '拣货过渡库位',
                name: 'pickTranLoc'
            },{
                type : 'input',
                showName: '默认异常储位',
                name: 'exSignLocNo'
            },{
                type : 'input',
                showName: '默认隔离储位',
                name: 'frozenLocNo'
            },
            // {
            //     type : 'input',
            //     showName: ' 库区基点',
            //     name: 'areaPoint'
            // },
            {
                showName: '使用托盘',
                type: 'select',
                name: 'useTray',
                optionList:[
                    {
                        optionKey:'',
                        optionShow:''
                    },{
                        optionKey:'0',
                        optionShow:'否'
                    },{
                        optionKey:'1',
                        optionShow:'是'
                    }
                ],
                initialValue : '0'
            },{
                showName: '托盘混载',
                type: 'select',
                name: 'trayMix',
                optionList:[
                    {
                        optionKey:'',
                        optionShow:''
                    },{
                        optionKey:'0',
                        optionShow:'否'
                    },{
                        optionKey:'1',
                        optionShow:'是'
                    }
                ],
                initialValue : '0'
            },{
                showName: '入库策略',
                type: 'select',
                name: 'instorageStrategy',
                optionList:[
                    {
                        optionKey:'',
                        optionShow:''
                    },{
                        optionKey:'1',
                        optionShow:'一步'
                    },{
                        optionKey:'2',
                        optionShow:'两步'
                    }
                ],
                initialValue : ''
            },{
                showName: '出库策略',
                type: 'select',
                name: 'outstorageStrategy',
                optionList:[
                    {
                        optionKey:'',
                        optionShow:''
                    },{
                        optionKey:'1',
                        optionShow:'一步'
                    },{
                        optionKey:'2',
                        optionShow:'两步'
                    }
                ],
                initialValue : ''
            },
            // {
            //     showName: '是否强制出库',
            //     name: 'forceOutstorage',
            //     type: 'select',
            //     optionList:[
            //         {
            //             optionKey:'',
            //             optionShow:''
            //         },{
            //             optionKey:'1',
            //             optionShow:'是'
            //         },{
            //             optionKey:'0',
            //             optionShow:'否'
            //         }
            //     ],
            //     initialValue : ''
            // },
            {
                showName: '库位允许拣货',
                name: 'locPickFlag',
                type: 'select',
                optionList:[
                    {
                        optionKey:'',
                        optionShow:''
                    },{
                        optionKey:'0',
                        optionShow:'否'
                    },{
                        optionKey:'1',
                        optionShow:'是'
                    }
                ],
                initialValue : ''
            },{
                type : 'selectAutoComplete',
                showName: '默认分配规则',
                name: 'allocationRule',
                childrenList:[            
                    {
                        key: '',
                        value: '分配规则还未开发'
                    }
                ]
            },
            // {
            //     type : 'input',
            //     showName: '默认集货位推荐类型',
            //     name: 'gatherLocType'
            // },
            {
                showName: '优先级',
                name: 'priority',
                type: 'select',
                optionList:[
                    {
                        optionKey:'',
                        optionShow:''
                    },{
                        optionKey:'1',
                        optionShow:'1'
                    },{
                        optionKey:'2',
                        optionShow:'2'
                    },{
                        optionKey:'3',
                        optionShow:'3'
                    },{
                        optionKey:'4',
                        optionShow:'4'
                    }
                ]
            },{
                showName: '激活标记',
                type: 'select',
                name: 'activeFlag',
                optionList:[
                    {
                        optionKey:'1',
                        optionShow:'启用'
                    },{
                        optionKey:'2',
                        optionShow:'禁用'
                    }
                ],
                initialValue : '1',
                required:true
            }
        ]
        };
        //和stroes进行通信挂钩 并绑定解绑事件unsubscribe
        this.unsubscribe = store.listen((storeResData)=>{
            this.setState({
                storeResData: storeResData
            })
        })

        //弹出框的大小 只有'large'和'small'两种值 （必须,输错时默认为large）
        this.formAlerSize = 'large'; 
        
    }
    //组件销毁时解绑与stores的监听
    componentWillUnmount(){
        this.unsubscribe();
    }

    // 获取仓库下拉框数据回调渲染
    queryWarehousesUnderFactoryCallBackHandle =(listData) =>{
        let optionList = [];
        optionList.push({optionKey:'',optionShow:'请选择'});
        listData.data.map( (e,index) => {
            let tmp = {};
            tmp.optionKey = e.warehouseCode;
            tmp.optionShow = e.warehouseCode;
            optionList.push(tmp);
        });
        let tmpFormData = this.state.formData;
        tmpFormData[3].optionList = optionList;            
        
        this.setState(
            {
                formData:tmpFormData,
                visible: true
            }
        );
       
    }

    //select的回调函数
    formSelectCallBack = (tagName,value) => {
        console.log('tagName',tagName);
        console.log('value',value);
        let whCode = value;
        // 选择完仓库
        if(tagName=='whCode'){
            // 动态加载区域
            let options= {
                url: '/base/region/r/'+whCode+'/region',
                type: 'post',
                condition:{}
            };
            fetchData(this, options, this.queryRegionsUnderWareHouseCallBackHandle);
            
            // 动态获取仓库下的入库过渡库位
            options= {
                url: '/base/data/location/r/all',
                type: 'post',
                condition:{locationAttr:'in',warehouseCode:whCode}
            };
            fetchData(this, options, this.queryLocationUnderWareHouseCallBackHandle);
        }
    }
     // 新增时获取仓库下的入库过渡库位
    queryLocationUnderWareHouseCallBackHandle =(listData)=>{
        let tmpFormData = this.state.formData;
        console.log('入库过渡库位',listData);
        let optionList=[];
        if(listData.data.length>0){

            listData.data.map( (e,index) => {
                let tmp = {};
                tmp.key = e.locationCode;
                tmp.value = e.locationCode;
                optionList.push(tmp);
            });
        }else{
            tmpFormData[5].initialValue='';
        }
        tmpFormData[5].childrenList = optionList;
        this.setState({getFormData:tmpFormData});
    }
    // 动态获取仓库下的区域
    queryRegionsUnderWareHouseCallBackHandle =(listData)=>{
        console.log('动态获取仓库下的区域');
        console.log(listData);
        let optionList = [];
        optionList.push({optionKey:'',optionShow:'请选择'});
        let disable = false;
        let tmpFormData = this.state.formData;
        if(listData.data.length>0){
            
            listData.data.map( (e,index) => {
                let tmp = {};
                tmp.optionKey = e.regionCode;
                tmp.optionShow = e.regionCode;
                optionList.push(tmp);
            });

            console.log('渲染区域下拉框');
            console.log(optionList);
            
        }else{

        }
        
        tmpFormData[4].optionList = optionList;
        tmpFormData[4].disable = disable;
        this.setState(
            {
                formData:tmpFormData
            }
        );
    }

    //显示弹框
    showModal = () => {       
        
    }
    // 查询工厂下的仓库
    queryWarehousesUnderFactory=()=>{
        let factoryCode = 'all';
        let options= {
            url: '/base/data/warehouse/r/'+factoryCode+'/warehouse',
            type: 'post',
            condition:{}
        };
        fetchData(this, options, this.queryWarehousesUnderFactoryCallBackHandle);
    }

    // 隐藏弹出框
    hideModal = () => {
        this.setState({
            visible: false,
        });
    }
    // 新增
    addHandle = () => {
        this.setState({
            submitUrl:'/base/data/area/c',
            formTitle: '新增库区',
            resData: null
        });
        //清空input值并给初始选择赋值
        let tmpFormData = this.state.formData;
        
        tmpFormData.map( (e, index) => {
            if(e.name=='activeFlag'){
                e.initialValue = '1';
            }else{
                e.initialValue = ''
            }           
        });
        this.setState({formData:tmpFormData});

        this.queryWarehousesUnderFactory();
        
    }
    // 获取编辑信息后的回调
    editGetInfoCallBack = (resData) =>{
        let tmpFormData = this.state.formData;
        // 编辑时候渲染初始数据
       // 1 先加载下拉框
        let factoryCode = 'all';
        let options= {
            url: '/base/data/warehouse/r/'+factoryCode+'/warehouse',
            type: 'post',
            condition:{}
        };
        // 当前item塞入resData
        this.setState({resData:resData});
        fetchData(this, options, this.queryWarehousesUnderFactoryEditCallBackHandle);
        
    }
    // 编辑时候获取下拉框
    queryWarehousesUnderFactoryEditCallBackHandle=(listData)=>{
        let tmpFormData = this.state.formData;
        // 首先将仓库下拉框填充
        let optionList = [];
        optionList.push({optionKey:'',optionShow:'请选择'});
        listData.data.map( (e,index) => {
            let tmp = {};
            tmp.optionKey = e.warehouseCode;
            tmp.optionShow = e.warehouseCode;
            optionList.push(tmp);
        });       
        tmpFormData[3].optionList = optionList;
        this.setState(
            {
                formData:tmpFormData
            }
        );
        // 其次填充区域下拉框

        // 动态加载区域
        let whCode = this.state.resData.data.whCode;
        let areaOptions= {
            url: '/base/region/r/'+whCode+'/region',
            type: 'post',
            condition:{}
        };
        console.log('编辑时动态加载库区下的区域',areaOptions);
        fetchData(this, areaOptions, this.queryRegionsUnderWareHouseEditCallBackHandle);

    }
    // 填充编辑时仓库和区域下拉框
    queryRegionsUnderWareHouseEditCallBackHandle =(listData) =>{
        console.log('--------------------',listData);
        let optionList = [];
        optionList.push({optionKey:'',optionShow:'请选择'});
        let tmpFormData = this.state.formData;
        if(listData.data.length>0){
            
            listData.data.map( (e,index) => {
                let tmp = {};
                tmp.optionKey = e.regionCode;
                tmp.optionShow = e.regionCode;
                optionList.push(tmp);
            });
            
        }
        
        tmpFormData[4].optionList = optionList;
        // this.setState({
        //         formData:tmpFormData});
        console.log("-------------------");
        let resData = this.state.resData;
        if(resData != null && resData.data != null){
            let itemData = resData.data;
            tmpFormData.map( (e, index) => {
                // 其次告诉仓库下拉框现在选中哪个
                if(e.type=='select'){
                    if(e.name=='whCode'){
                        tmpFormData[3].initialValue=itemData[e.name];
                    }else if(e.name=='regionCode'){
                       tmpFormData[4].initialValue=itemData[e.name];
                    }
                }else{
                    e.initialValue = itemData[e.name]
                }
            });
        }
        // 更新state
        this.setState({
            submitUrl:'/base/data/area/u',
            resData: resData,
            visible:true,
            formData:tmpFormData
        });
    }

    // 编辑信息
    editHandle = (rowObj) => {
        this.setState({
            resData: null,
            formTitle: '修改库区'
        });
        //根据对象的Id 属性获取对象信息
        let areaId = rowObj.areaId;
        const options= {
            url: '/base/data/area/r/'+areaId,
            condition:{},
        };
        fetchData(this, options, this.editGetInfoCallBack);
    }

    // 删除用户
    deleteHandle = (rowObj) => {
        let areaId = rowObj.areaId;
        const options= {
            url: '/base/data/area/d',
            condition:{areaId:areaId},
            contentType:'application/x-www-form-urlencoded'
        };
        let _that = this;
        confirm({
            title: '您确定要删除吗？',
            onOk() {
                fetchData(_that, options, (resData) => {
                    _that.setState({
                        resData: resData
                    });
                    if (resData.code == '0'){
                        alert(resData.msg);
                    }else {
                        _that.refreshHandle();
                    }
                });
            },
            onCancel() {
                console.log("取消了删除操作")
            },
        });
    }

    // 新增/修改后的回调
    handleOk = () => {
        // let result = this.state.resData;
        this.hideModal();
        this.refreshHandle();
    }

    handleCancel = () => {
        this.hideModal();
    }


    //刷新List列表
    refreshHandle = () => {
        console.log("刷新List列表")
        this.props.refreshHandle();
    }

    componentDidMount() {

    }
    componentWillUpDate(){

    }

    render() {

        

        return(
            <Modal
                style={{top:'20px'}}
                visible={this.state.visible}
                title={this.state.formTitle ? this.state.formTitle : '填写表单'}
                onOk={this.handleOk}
                onCancel={this.handleCancel}
                width={this.formAlerSize=='large'?'850px':'400px'}
                footer=''
            >

                <WrappedAdvancedSearchForm
                    ref="modalFrom"
                    title="库区信息"
                    formAlerSize={this.formAlerSize}
                    formUrl={this.state.submitUrl}
                    getFormData={this.state.formData}
                    closeBox={this.handleCancel}
                    checkBox={this.handleOk} 
                    formSelectCallBack={this.formSelectCallBack}
                />

            </Modal>
        )
    }
}
